<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
			引入外部的js文件
		-->
    <script type="text/javascript" src="../js/regutils.js" ></script>
    <script>
        /*
                 1. 确定事件 : onfocus
                 2. 事件要驱动函数
                 3. 函数要干一些事情: 修改span的内容
             */
        function showTips(spanID,msg){
            //首先要获得要操作元素 span
            var span = document.getElementById(spanID);
            span.innerHTML = msg;
        }
        /*
            校验用户名:
            1.事件: onblur  失去焦点
            2.函数: checkUsername()
            3.函数去显示校验结果
        */
        function checkUsername(){
            //获取用户输入的内容
            var uValue = document.getElementById("username").value;
            //对输入的内容进行校验
            //获得要显示结果的span
            var span = document.getElementById("span_username");
            if(uValue.length < 6){
                //显示校验结果
                span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
                return false;
            }else{
                span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
                return true;
            }
        }

        /*
         密码校验
         */
        function checkPassword(){
            //获取密码输入
            var uPass = document.getElementById("password").value;

            var span = document.getElementById("span_password");

            //对密码输入进行校验
            if(uPass.length < 6){
                span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
                return false;
            }else{
                span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>";
                return true;
            }
        }

        /*
         确认密码校验
         * */
        function checkRePassword(){
            //获取密码输入
            var uPass = document.getElementById("password").value;

            //获取确认密码输入
            var uRePass = document.getElementById("repassword").value;


            var span = document.getElementById("span_repassword");

            //对密码输入进行校验
            if(uPass != uRePass){
                span.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>";
                return false;
            }else{
                span.innerHTML = "";
                return true;
            }
        }

        /*
         校验邮箱
         * */
        function checkMail(){
            var umail = document.getElementById("email").value;

            var flag = checkEmail(umail);

            var span = document.getElementById("span_email");
            //对邮箱输入进行校验
            if(flag){
                span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
                return true;
            }else{
                span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
                return false;
            }
        }

        //校验手机号码
        function checkPhone() {
            var phone = document.getElementById("telephone").value;

            var flag = checkMobile(phone);

            var telephone = document.getElementById("span_phone");

            if (flag){
                telephone.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
                return true;
            } else {
                telephone.innerHTML ="<font color='red' size='2'>对不起,手机号码格式貌似有问题</font>";
                return false;
            }
        }

        function checkForm(){
            var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail() && checkPhone();
            return flag;
        }

    </script>
</head>
<body>
    <!--注意：不能用方法名为foucus（）或者是blur（）等系统名-->
    <form action="表单校验.html" onsubmit="return checkForm()">
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" />
                </td>
                <td><span id="span_username"></span></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/>
                </td>
                <td><span id="span_password"></span></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" />
                </td>
                <td><span id="span_repassword"></span></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" />
                </td>
                <td><span id="span_email"></span></td>
            </tr>
            <tr>
                <td>手机号：</td>
                <td><input type="text" id="telephone" onfocus="showTips('span_phone','手机号格式必须正确')" onblur="checkPhone()" onkeyup="checkPhone()">
                </td>
                <td><span id="span_phone"></span></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="提交"></td>
            </tr>
        </table>
    </form>
</body>
</html>